<template>
  <div class="container">
    <div class="page-components" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave" ref="pageRef">
      <img src="https://pic1.183read.cc/data/newspaper/31/34231/38/697338/image/10_11.jpg" alt="" class="cover"
           ref="coverRef">
      <canvas id="mCanvas" class="mCanvas"></canvas>
      <div class="tip" v-if="tipText" :style="tipStyle">{{tipText}}</div>
    </div>
    <div @scroll="handleScroll" style="height: 300px;overflow:auto">
      <div style="height: 50px" v-for="i in list">{{i}}</div>
    </div>
  </div>
</template>

<script setup>
import {computed, nextTick, onMounted, ref} from 'vue'

let context = null
const list =ref(new Array(50).fill(0).map((item,index)=>index))
let oldScrollHeight = 0
function  handleScroll(e) {
  if(e.target.scrollTop===0){
    oldScrollHeight = e.target.scrollHeight
    list.value.push(...new Array(50).fill(0).map((item,index)=>index))
    nextTick(()=>{
      e.target.scrollTop = oldScrollHeight
    })
    console.log(list.value)
  }
}

const article_list = ref([
  {
    "magazine_article_id": 2597436,
    "title": "延续两岸血脉 咏叹乡村幸福",
    "vicetitle": "第十一届海峡论坛·第二届两岸基层治理论坛开启协商大幕",
    "introtitle": "",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "本报记者;王惠兵",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "0.43,6.27",
    "point_right_top": "77.89,6.27",
    "point_right_bottom": "77.89,53.93",
    "point_left_bottom": "0.43,53.93",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597437,
    "title": "开启新时代两岸乡村振兴新征程",
    "vicetitle": "",
    "introtitle": "",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "1.26,20.12",
    "point_right_top": "23.21,20.12",
    "point_right_bottom": "23.21,38.83",
    "point_left_bottom": "1.26,38.83",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597438,
    "title": "闽台“和调”奏响乡村振兴“奋进曲”",
    "vicetitle": "",
    "introtitle": "",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "本报记者;王惠兵",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "0.22,57.30",
    "point_right_top": "36.59,57.30",
    "point_right_bottom": "36.59,99.19",
    "point_left_bottom": "0.22,99.19",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597439,
    "title": "两岸细语润乡邻",
    "vicetitle": "",
    "introtitle": "",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "本报记者;王惠兵",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "38.28,57.30",
    "point_right_top": "74.25,57.30",
    "point_right_bottom": "74.25,99.36",
    "point_left_bottom": "38.28,99.36",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597440,
    "title": "从美仁彩绘村的变迁看乡村振兴",
    "vicetitle": "",
    "introtitle": "台湾村里长联合总会总会长、台中市沙鹿区美仁里里长陈建良：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "76.11,19.04",
    "point_right_top": "97.66,19.04",
    "point_right_bottom": "97.66,27.06",
    "point_left_bottom": "76.11,27.06",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597441,
    "title": "重在得人，激活乡村振兴内生动力",
    "vicetitle": "",
    "introtitle": "福建省厦门市海沧区政协副主席乐智强：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "76.02,27.50",
    "point_right_top": "97.46,27.50",
    "point_right_bottom": "97.46,35.96",
    "point_left_bottom": "76.02,35.96",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597442,
    "title": "绿色发展才能承载未来",
    "vicetitle": "",
    "introtitle": "台湾中华两岸经贸投资文化教育协会理事、香港恒丰集团执行董事江蓝：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.73,36.37",
    "point_right_top": "97.46,36.37",
    "point_right_bottom": "97.46,45.10",
    "point_left_bottom": "75.73,45.10",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597443,
    "title": "加快建设海峡两岸融合发展示范区",
    "vicetitle": "",
    "introtitle": "四川省成都市新津县兴义镇镇长陈德际：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.82,45.13",
    "point_right_top": "97.46,45.13",
    "point_right_bottom": "97.46,53.99",
    "point_left_bottom": "75.82,53.99",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597444,
    "title": "以两岸AI技术协助解决“三农”问题",
    "vicetitle": "",
    "introtitle": "台湾村里长联谊总会总会长、桃园市桃园区汴洲里里长杨鑫坤：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.64,53.99",
    "point_right_top": "97.44,53.99",
    "point_right_bottom": "97.44,63.03",
    "point_left_bottom": "75.64,63.03",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597445,
    "title": "聚心聚智聚力  服务乡村振兴",
    "vicetitle": "",
    "introtitle": "广西壮族自治区百色市隆林各族自治县政协主席黄子锋：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.35,63.20",
    "point_right_top": "97.64,63.20",
    "point_right_bottom": "97.64,71.92",
    "point_left_bottom": "75.35,71.92",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597446,
    "title": "借鉴台湾基层农会经验促进农业现代化发展",
    "vicetitle": "",
    "introtitle": "台湾台中县原县长黄仲生：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.53,72.50",
    "point_right_top": "97.66,72.50",
    "point_right_bottom": "97.66,80.96",
    "point_left_bottom": "75.53,80.96",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597447,
    "title": "六个“一”振兴幸福美好新农村",
    "vicetitle": "",
    "introtitle": "福建省漳州市长泰县岩溪镇党委书记王凌：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.73,81.09",
    "point_right_top": "97.46,81.09",
    "point_right_bottom": "97.46,89.25",
    "point_left_bottom": "75.73,89.25",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  },
  {
    "magazine_article_id": 2597448,
    "title": "台湾少数民族地区乡村振兴优先激活“人地钱”",
    "vicetitle": "",
    "introtitle": "台湾台东县东河乡原乡民代表、台北市海洋社会教育研究协会理事长、马布珑工坊负责人陈诚三：",
    "item_id": 697338,
    "resource_id": 34231,
    "author": "",
    "pdf_page_num": 10.11,
    "pdf_page_id": 138166565,
    "point_left_top": "75.53,89.69",
    "point_right_top": "97.68,89.69",
    "point_right_bottom": "97.68,99.43",
    "point_left_bottom": "75.53,99.43",
    "is_open_pay": 1,
    "price": "0.50",
    "has_audio": 1,
    "user_auth": 0,
    "point_list": []
  }
])
let canvas =
onMounted(() => {
   canvas = document.getElementById('mCanvas')
  context = canvas.getContext('2d')
  canvas.width = 430
  canvas.height = 620
  // coverRef.value.onload = () => {
  //   const aspectRatio = coverRef.value.naturalWidth / coverRef.value.naturalHeight;
  //   canvas.height = 430 / aspectRatio; // 根据宽度自动计算高度
  // };

})

function formatPoint(list) {
  article_list.value = list.map(item=>{
    if(item.point_list.length===0){
      return {
        ...item,
        point_list: [item.point_left_top, item.point_right_top, item.point_right_bottom, item.point_left_bottom]
      }
    }
    return item
  })
}
formatPoint(article_list.value)




const pageRef = ref()
const coverRef = ref()
let currentPointIndex = ref(-1)
const tipText = computed(() => {
  if(currentPointIndex.value!==-1){
    return article_list.value[currentPointIndex.value].title
  }
  return ""

})


function isPointInPolygon(point, polygon) {
  let isInside = false;
  const {x, y} = point;
  const n = polygon.length;

  for (let i = 0, j = n - 1; i < n; j = i++) {
    const xi = polygon[i].x, yi = polygon[i].y;
    const xj = polygon[j].x, yj = polygon[j].y;

    const intersect = ((yi > y) !== (yj > y)) &&
        (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) isInside = !isInside;
  }
  return isInside;
}

function handleMouseMove(e) {
  // 检测当前鼠标在哪一个热点区域
  const {clientX, clientY} = e
  const rect = pageRef.value.getBoundingClientRect()
  const {left, top} = rect

  // 计算图像缩放比例
  const scaleX = 430 / 100
  const scaleY = (430 / (coverRef.value.naturalWidth/ coverRef.value.naturalHeight) )/ 100
  canvas.height = (430 / (coverRef.value.naturalWidth / coverRef.value.naturalHeight))

  // const scaleY = (canvas.height / coverRef.value.naturalHeight);
  // const scaleX = 430 / coverRef.value.naturalWidth
  const x = clientX - left
  const y = clientY - top
  currentPointIndex.value= -1
  // 找到当前鼠标坐标对应的热点区域
  for (let i = 0; i < article_list.value.length; i++) {
    const pointList = article_list.value[i].point_list.map(point => {
      const [x, y] = point.split(",").map(Number)
      return {
        x: x * scaleX,
        y: y * scaleY
      }
    })
    const mousePoint = {x, y};
    if (isPointInPolygon(mousePoint, pointList)) {
      currentPointIndex.value = i
      break
    }
  }
  if (currentPointIndex.value !== -1) {
    // 绘制矩形框
    drawRect(article_list.value[currentPointIndex.value].point_list, scaleX, scaleY)
    // Tip位置
    drawText(article_list.value[currentPointIndex.value].point_list,scaleX, scaleY)
  } else {
    // 没有找到对应的热点区域，清空矩形框
    context.clearRect(0, 0, 430, 620)
    currentPointIndex.value = -1
  }

}
const tipStyle = ref({})
function drawText(pointList,scaleX, scaleY) {
  const newPointList = pointList.map(point => {
    const [x, y] = point.split(",").map(Number)
    return {
      x: x * scaleX,
      y: y * scaleY
    }
  })
  const minX = Math.min(...newPointList.map(point => point.x))
  const minY = Math.min(...newPointList.map(point => point.y))
  const maxX = Math.max(...newPointList.map(point => point.x))
  const maxY = Math.max(...newPointList.map(point => point.y))

  const tipWidth = maxX - minX

  if( maxX > 400 && tipWidth < 300){
    tipStyle.value ={
      top: maxY + 10 + "px",
      right: (430 - maxX) + "px"
    }
  }else  {
    tipStyle.value ={
      top: maxY + 10 + "px",
      left: minX + "px"
    }
  }


}

function drawRect(pointList, scaleX, scaleY) {
  context.clearRect(0, 0, 430, 620)
  context.beginPath()
  const firstPoint = pointList[0].split(",").map(Number);
  context.moveTo(firstPoint[0] * scaleX, firstPoint[1] * scaleY);
  for (let i = 1; i < pointList.length; i++) {
    const point = pointList[i].split(",").map(Number);
    context.lineTo(point[0] * scaleX, point[1] * scaleY);
  }
  context.closePath()
  context.fillStyle = "#fc555580"
  context.fill()
  context.strokeStyle = "#FF0101"
  context.lineWidth = 1.5
  context.stroke()
}

function handleMouseLeave(e) {
  context.clearRect(0, 0, 430, 620)
  currentPointIndex.value = -1
}

</script>


<style lang="scss" scoped>
.container {
  .page-components {
    width: 430px ;
    height: 620px;
    position: relative;
    box-sizing: border-box;
    margin: 100px;
    cursor: pointer;

    .cover {
      width: 430px;
      //height: 620px;
      height: auto;
    }

    .mCanvas {
      position: absolute;
      top: 0;
      left: 0;
      opacity: .5;
      background: rgba(0, 0, 0, 0);
      z-index: 10;
    }
    .tip{
      position: absolute;
      top: 0;
      padding: 8px 10px;
      border-radius: 2px;
      background: #fea92a;
      align-items: center;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      line-height: 18px;
      z-index: 11;
      box-sizing: border-box;
      //max-width: 430px;
      width: fit-content;
    }
  }
}
</style>
